<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="/css/register.css" />
		<title>注册</title>
	</head>

	<body>
		<div class="top">

		</div>
		<div class="div1" align="center">

			<!--放注册的盒子-->
			<div class="div9">
				<form class="layui-form">

					<div class="div3">
						<input type="text" name="certificate" id="certificate" placeholder="请输入邮箱地址" class="dongtai" />
					</div>
					<div class="div4">
						<input type="password" name="token"   placeholder="请输入密码" class="yonghu" />
					</div>
					<div class="div5">
						<input type="password" name="token1"  placeholder="请确认密码" class="shezhi" />
					</div>
					<div class="div2">
						<input type="tel" name="code"  placeholder="请输入验证码" class="shouji" />
						<input class="yanzhen" type="button" value="获取验证码" />
					</div>
					<div class="div8">
						<input class="tongyi" lay-submit lay-filter="register" type="submit" value="注册" />
					</div>
					<div class="div10">
						<span class="spanss">已有账号？  </span>
						<a class="a-login" href="../login/pc_loginPage">去登录</a>
					</div>
				</form>

			</div>
		</div>
		<div class="footer">
			<a href="#">网易</a>
			<span>|</span>
			<a href="#">联系客服</a>
			<span>|</span>
			<a href="#">帮助</a>
		</div>
		<script type="text/javascript" th:src="@{/js/layui/layui.js}"></script>
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
		<script>
			let myUrl = localStorage.getItem("myUrl");
			  layui.use(['form'], function() {
				var $ = layui.$,
				form = layui.form;
				  $("#certificate").blur(function() {
					  if(!/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test($("#certificate").val())) {
						  layer.msg("邮箱格式不正确");
						  $("#certificate").val('');
						  return false;
					  }
				  });

				  $(".shezhi").blur(function() {
					  if ($(".yonghu").val() != $(".shezhi").val()) {
						  layer.msg("两次输入密码不同，请重新输入");
						  $(".shezhi").val('');
						  return false;
					  }
				  })

				$(".yanzhen").click(function() {

					var obj = this;
					$.ajax({
						type: "get",
						data: {
							certificate: $("#certificate").val()
						},
						url: myUrl+"/note-user/certificate/getCode",
						dataType: "json", //返回的
						success: function(data) {
							if(data.rs) {
								$(".yanzhen").addClass("layui-btn-disabled");
								$('.yanzhen').attr('disabled', "true");
								settime(obj);
							} else {
								layer.msg(data.msg);
							}
						},
						error: function(msg) {
							console.log(msg);
						}
					});
				})
				var countdown = 60;
				function settime(obj) {
					if(countdown == 0) {
						obj.removeAttribute("disabled");
						obj.classList.remove("layui-btn-disabled")
						obj.value = "获取验证码";
						countdown = 60;
						return;
					} else {
						obj.value = "重新发送(" + countdown + ")";
						countdown--;
					}
					setTimeout(function() {
						settime(obj)
					}, 1000)
				}

				form.on('submit(register)', function(data) {
					console.log(data.field);
					if($(".yonghu").val()==""||$(".shezhi").val()==""){
						layer.msg("密码不能为空",{time:1000});
						return false;
					}else{
					$.ajax({
						url: myUrl+"/note-user/certificate/register",
						type: 'post',
						data: JSON.stringify(data.field),
						contentType: 'application/json',
						dataType: 'json',
						success: function(d) {
								if(d.rs) {
									/*parent.layer.msg(d.msg, {
                                        icon: 1
                                    });*/
									/*layer.msg(d.msg);*/

									layer.msg(d.msg, {icon: 6,time:1000, shade:0.4},function(){
										location = "/login/pc_loginPage"
									});

								} else {

									layer.msg(d.msg,{time:1000});
								}
                            }

					});}
					return false;
				});

			})

		</script>

	</body>

</html>